<template>
    <view class="chatting-content">
        <!-- 时间分隔线 -->
        <view class="time-divider">10:30</view>

        <!-- 消息列表 -->
        <view class="message-list">
            <view
                v-for="(msg, index) in messages"
                :key="index"
                class="message-item"
                :class="msg.type"
            >
                <!-- 头像 -->
                <view class="avatar">
                    <image :src="msg.avatar"></image>
                </view>

                <!-- 消息内容区域 -->
                <view class="message-content-container">
                    <!-- 消息主体 -->
                    <view class="message-main">
                        <!-- 文本消息 -->
                        <view
                            class="message-content"
                            v-if="!msg.isImage && !msg.isVideo"
                        >
                            <text>{{ msg.content }}</text>
                        </view>

                        <!-- 图片消息 -->
                        <view class="message-content-image" v-if="msg.isImage">
                            <image
                                :src="msg.imageUrl"
                                mode="aspectFill"
                            ></image>
                        </view>

                        <!-- 视频消息 -->
                        <view class="message-content-video" v-if="msg.isVideo">
                            <image
                                :src="msg.videoThumb"
                                class="video-thumb"
                                mode="aspectFill"
                            ></image>
                            <view class="play-icon">
                                <han-icon name="player" size="48" />
                            </view>
                        </view>
                    </view>

                    <!-- 消息状态区域 -->
                    <view class="message-status">
                        <!-- 时间戳 -->
                        <view class="message-time">
                            {{ msg.time }}
                        </view>

                        <!-- 已读/未读状态 -->
                        <view
                            v-if="msg.type === 'sent'"
                            class="read-status"
                            :class="{ read: msg.read }"
                        >
                            <text>{{ msg.read ? '已读' : '未读' }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

// 假数据 - 聊天消息
const messages = ref([
    {
        id: 1,
        type: 'received',
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/4.png',
        content: '你好！我看到你发布的汉服照片，真是太美了！',
        time: '10:30',
        read: true
    },
    {
        id: 2,
        type: 'sent',
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/4.png',
        content: '谢谢夸奖！😊 你也喜欢汉服吗？',
        time: '10:32',
        read: true
    },
    {
        id: 3,
        type: 'received',
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/4.png',
        content:
            '非常喜欢！我最近刚开始接触汉服文化，能推荐一些适合新手的款式吗？',
        time: '10:33',
        read: true
    },
    {
        id: 4,
        type: 'sent',
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/4.png',
        content: '当然可以！齐胸襦裙和马面裙都很适合新手，既好看又容易搭配～',
        time: '10:35',
        read: true
    },
    {
        id: 5,
        type: 'received',
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/4.png',
        content: '太感谢了！我特别喜欢明制汉服，你觉得这款怎么样？',
        time: '10:37',
        read: true
    },
    {
        id: 6,
        type: 'received',
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/4.png',
        content: '',
        time: '10:37',
        isImage: true,
        imageUrl:
            'https://n.sinaimg.cn/sinakd20120/586/w1280h1706/20220808/a3a2-d2ae218078bdea8ef03d625eb7811392.jpg',
        read: true
    },
    {
        id: 7,
        type: 'sent',
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/4.png',
        content: '哇！这款很经典！颜色搭配也很温柔，非常适合日常穿着呢～',
        time: '10:39',
        read: true
    },
    {
        id: 8,
        type: 'sent',
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/4.png',
        content: '如果你需要，我可以分享一些我收藏的汉服店铺给你',
        time: '10:40',
        read: false // 未读消息示例
    },
    {
        id: 9,
        type: 'received',
        avatar: 'https://han-soul.oss-cn-shenzhen.aliyuncs.com/avatar/4.png',
        content: '太好了！这是我在小红书看到的汉服视频',
        time: '10:42',
        isVideo: true,
        videoThumb:
            'https://han-soul.oss-cn-shenzhen.aliyuncs.com/images/hanfu-video-thumb.jpg',
        read: true
    }
]);
</script>

<style scoped lang="scss">
.chatting-content {
    flex: 1;
    overflow-y: auto;
    padding: 30rpx;
    background-color: $han-global-bg-color;
    padding-bottom: 100rpx;
}

.time-divider {
    text-align: center;
    font-size: $han-font-size-sm;
    color: $han-global-secondary-font-color;
    margin: 20rpx 0;
    position: relative;
}

.message-list {
    display: flex;
    flex-direction: column;
    gap: 50rpx;
}

.message-item {
    display: flex;
    max-width: 100%;

    &.received {
        .message-content-container {
            margin-left: 20rpx;
        }

        .message-main {
            .message-content {
                background-color: #fff;
                border-radius: 0 $han-border-radius-lg $han-border-radius-lg
                    $han-border-radius-lg;
                border: 1rpx solid $han-global-border-color;
                color: $han-global-primary-font-color;
            }

            .message-content-image,
            .message-content-video {
                border-top-left-radius: 0;
            }
        }

        .message-status {
            justify-content: flex-start;
        }
    }

    &.sent {
        flex-direction: row-reverse;

        .message-content-container {
            margin-right: 20rpx;
            align-items: flex-end;
        }

        .message-main {
            .message-content {
                background: $han-primary-color;
                color: white;
                border-radius: $han-border-radius-lg 0 $han-border-radius-lg
                    $han-border-radius-lg;
            }

            .message-content-image,
            .message-content-video {
                border-top-right-radius: 0;
            }
        }

        .message-status {
            justify-content: flex-end;
        }
    }
}

.avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

    image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.message-content-container {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}

.message-main {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.message-content {
    padding: 20rpx;
    border-radius: 16rpx;
    line-height: 1.5;
    font-size: $han-font-size-base;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    max-width: 100%;
    word-break: break-word;
}

.message-content-image {
    width: 300rpx;
    height: 400rpx;
    border-radius: $han-border-radius-md;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.message-content-video {
    width: 300rpx;
    height: 400rpx;
    border-radius: $han-border-radius-md;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .video-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.message-status {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-top: 8rpx;
}

.message-time {
    font-size: $han-font-size-xs;
    color: $han-global-secondary-font-color;
}

.read-status {
    display: flex;
    align-items: center;
    gap: 4rpx;
    font-size: $han-font-size-xs;

    &.read {
        color: $han-global-secondary-font-color;
    }

    &:not(.read) {
        color: $han-primary-color;
    }
}
</style>
